<template>
	<!-- 日历 -->
	<view class="context">
		<view class="top">
			<image src="../../static/img/user-img/left.png" @click="bindPreMonth" />
			<view>{{ year }}年{{ month }}月</view>
			<image src="../../static/img/user-img/right.png" @click="bindNextMonth" />
		</view>

		<!-- 签到历史 -->
		<view
			style="width: 280rpx; display: block; box-sizing: border-box; height: 79rpx; left: 350rpx; top: -45rpx; position: relative">
			<button @click="toggleList"
				style="width: 289rpx; display: block; box-sizing: border-box; left: 74rpx; top: 0rpx; position: relative; opacity: 0.5;">签到历史</button>
			<view class="floating-list" v-if="showList">
				<view v-for="(item, index) in signedDays" :key="index" class="listtext">{{ item }}</view>
			</view>
		</view>

		<view class="middle">
			<view v-for="(item, index) in data_arr" :key="index" class="middle_num">
				{{ item }}
			</view>
		</view>

		<view class="calen">
			<view v-for="() in startWeek" :key="index" class="calen_blank"></view>
			<view v-for="(day, index) in currentMonthDays"
				:class="index + 1 === today[0].today ? 'active' : 'calen_num'" :key="index">
				{{ index + 1 }}
			</view>
		</view>
	</view>

	<!-- 签到按钮 -->
	<button @click="qiandao">
		签到
	</button>

	<view class="date">
		<!-- 连续签到组件 -->
		<view class="date-left">
			<span>已连续签到</span>
			<span class="num">{{num}}</span>
			<span>天</span>
		</view>

		<!-- 积分记录组件 -->
		<view class="date-right">
			<span class="integral">{{ integral }}</span>
			<span>当前积分：</span>
		</view>
	</view>
</template>

<script>
export default {
  data() {
    return {
      data_arr: ["日", "一", "二", "三", "四", "五", "六"], // 存储一周的星期名称
      year: new Date().getFullYear(), // 存储当前年份
      month: new Date().getMonth() + 1, // 存储当前月份
      today: [{
        today: new Date().getDate()
      }], // 存储今天的日期信息，初始化为包含今天的日期对象
      num: 0, // 记录签到的天数
      integral: 0, // 记录积分
      nowlist: [], // 当前月份的签到列表
      signedDays: [], // 存储已经签到的年月日
      showList: false, // 是否显示签到历史列表
    };
  },
  created() {
    this.loadData();
    this.showCalendar();
  },
  methods: {
    // 加载数据
    loadData() {
      const num = wx.getStorageSync('num');
      const integral = wx.getStorageSync('integral');
      const year = wx.getStorageSync('year');
      const month = wx.getStorageSync('month');
      const signedDays = wx.getStorageSync('signedDays');

      this.num = num ? parseInt(num) : 0;
      this.integral = integral ? parseInt(integral) : 0;
      this.year = year ? parseInt(year) : this.year;
      this.month = month ? parseInt(month) : this.month;
      this.signedDays = signedDays ? JSON.parse(signedDays) : [];
    },
    // 切换签到历史列表的显示状态
    toggleList() {
      this.showList = !this.showList;
    },
    // 签到方法
    qiandao() {
      const today = new Date().toISOString().split('T')[0];
      if (!this.signedDays.includes(today)) {
        wx.showToast({
          title: '今日已成功签到',
          icon: 'success',
        });
        this.num += 1;
        this.integral += 1;
        this.today = [{
          today: new Date().getDate()
        }];

        this.signedDays.push(today);
        wx.setStorageSync('day', today);
        wx.setStorageSync('num', this.num);
        wx.setStorageSync('integral', this.integral);
        wx.setStorageSync('signedDays', JSON.stringify(this.signedDays));
      } else {
        wx.showToast({
          title: '今日已签到',
          icon: 'none',
        });
      }
    },
    // 显示日历
    showCalendar() {
      const currentMonthDays = new Date(this.year, this.month, 0).getDate();
      const startWeek = new Date(this.year, this.month - 1, 1).getDay();
      this.startWeek = new Array(startWeek).fill(null); // 创建空白填充
      this.currentMonthDays = Array.from({
        length: currentMonthDays
      }, (_, i) => i + 1);
    },
    // 上一个月
    bindPreMonth() {
      if (this.month - 1 >= 1) {
        this.month -= 1;
      } else {
        this.month = 12;
        this.year -= 1;
      }
      this.updateSignDate();
      this.showCalendar();
    },
    // 下一个月
    bindNextMonth() {
      if (this.month + 1 <= 12) {
        this.month += 1;
      } else {
        this.month = 1;
        this.year += 1;
      }
      this.updateSignDate();
      this.showCalendar();
    },
    // 更新签到日期状态
    updateSignDate() {
      const day = wx.getStorageSync('day') || new Date().toISOString().split('T')[0];
      const storedDay = new Date(day);
      storedDay.setFullYear(this.year, this.month - 1, storedDay.getDate());
      const newDay = storedDay.toISOString().split('T')[0];
      wx.setStorageSync('day', newDay);
    }
  }
}
</script>

<style scoped>
	.context {
		width: 96%;
		height: 380px;
		background-image: url("https://p0.ssl.qhimgs1.com/t01f2e12fe76fc23380.jpg");
		margin: 0 auto;
		padding: 10rpx;
		border-radius: 20px 20px 20px 20px;
		margin-top: 10rpx;
	}

	.top {
		margin-top: 15rpx;
		height: 80rpx;
		display: flex;
		justify-content: space-around;
	}

	.top image {
		height: 30rpx;
		width: 30rpx;
	}

	.middle {
		display: flex;
	}

	.middle_num {
		width: 14%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.calen {
		display: flex;
		height: 400rpx;
		flex-wrap: wrap;
		/* 必要的时候拆行或拆列。 */
	}

	.calen_blank {
		width: 14%;
		height: 20%;
		/* background-color: antiquewhite; */
	}

	.calen_num {
		width: 14%;
		height: 20%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.active {
		/* background-color:rgb(0, 255, 76); */
		background-image: url("https://p0.ssl.qhimgs1.com/t01f2e12fe76fc23380.jpg");
		width: 14%;
		height: 20%;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
	}

	button {
		position: relative;
		margin-top: 10%;
		border-radius: 20px 20px 20px 20px;
		background-image: url("https://p0.ssl.qhimgs1.com/t01f2e12fe76fc23380.jpg");
	}

	.date {
		display: flex;
		/* 使用 Flexbox 布局 */
		justify-content: space-between;
		/* 子元素分散对齐 */
		align-items: center;
		/* 垂直居中 */
		position: relative;
		left: 3%;
		margin-top: 20px;
		width: 95%;
		height: 100px;
		text-align: center;
		background-color: white;
		border-radius: 20px;
	}

	.data-left {
		float: ;
		font-size: 32rpx;
	}

	.date-left .num {
		color: red;
		font-weight: 700;
	}

	.date-right {
		font-size: 32rpx;
		float: right;
	}

	.date-right .integral {
		color: red;
		font-weight: 700;
		float: right;
	}

	/* 浮动层的样式 */
	.floating-list {
		position: absolute;
		/* 绝对定位 */
		top: 45px;
		left: 40px;
		width: 150px;
		/* 设置列表宽度 */
		background-image: url("https://p0.ssl.qhimgs1.com/t01f2e12fe76fc23380.jpg");
		z-index: 10;
		/* 确保列表在最上层 */
		border-radius: 20px 20px 20px 20px;
	}

	.list {
		height: 100px;
		width: 110px;
		float: right;
		padding-right: 20px;
		overflow: hidden;
		/* 防止内容溢出 */
	}

	.listtext {
		color: rgba(0, 0, 0, 0.5);
		display: block;
		margin: 5px;
	}
</style>
